<template>
<div class="wrapper">
    <header>
        <p>商品列表</p>
    </header>
</div>
<ul class="business">
<li v-for="item in GoodsArr" @click="toGoodsInfo(item.businessId)" v-bind:key="item.foodId" class="li-food">
    <div class="business-img">
        <img :src="item.foodImg" />
        <!-- <div class="business-img-quantity"></div> -->
    </div>
    <div class="business-info">
        <h3>{{ item.foodName }}</h3>
        <p>&#165;{{ item.foodPrice }}单价 | &#165; 0配送</p>
        <p>{{ item.foodExplain }}</p>
    </div>
</li>
</ul>
<Footer></Footer>
</template>
<script>
export default{
    name:'goodsList',
    data(){
        return {
            searchKey:this.$route.query.searchKey,
            GoodsArr:[],
            user:{},
            business:{}
        }
    },
    created(){
        this.user = this.$getSessionStorage('user');
        this.$axios.post('SearchController/searchByKey',this.$qs.stringify({
            searchKey:this.searchKey
        })).then(response =>{
            this.GoodsArr = response.data;
            if(this.user != null){
                this.listCartByUserId();
            }else{
                this.$router.push({path:'/login'});
            }
        }).catch(error =>{
            console.error(error);
            
        });

    },
    methods:{
        toGoodsInfo(businessId){
            this.$router.push({path:'/goodsInfo',query:{businessId:businessId}});

        },
        listCartByUserId(){
          this.$axios.post('CartController/ListCart',this.$qs.stringify({
            userId:this.user.userId
          })).then(response =>{
            let cartArr = response.data;
            for(let goodsItem of this.GoodsArr){
                goodsItem.quantity = 0;
                for(let cartItem of cartArr){
                    if(cartItem.foodId == goodsItem.foodId){
                        goodsItem.quantity +=cartItem.quantity;
                    }
                }
            }
            this.GoodsArr.sort()
            console.log(this.GoodsArr);
            
          }).catch(error =>{
            console.error(error);
            
          });
        }
    }
};
</script>
<style>
.wrapper{
    width: 100%;
    height: 100px;
    font-size: 50px;
    background-color: #0097ff;
  
    color: white;
    text-align: center;

}
.li-food{
    display: flex;
    justify-content: space-around;
    width: 100%;
    justify-items: center;
    margin-top: 20px;
}
</style>